<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-end">
      <span class="c-fs30">{{trainingName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{trainingDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreTraining">更多</span>
    </div>
    <div @click="clickGoTrainingDetail(item.id)" class="c-pt30 c-flex-row" :key="index" v-for="(item,index) in trainingList">
      <div class="c-ww240 c-maxh160 c-text-hidden c-br10 c-p">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <div class="timeShow" v-if="[1, 4, 5, 6].includes(item.status)">
          <div v-if="item.status == 1">
            距报名
            <cj-clocker :time="timeFn(index)" format="%D天%H小时" @on-finish="finishFn(index)"></cj-clocker>
          </div>
          <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
        <div class="c-fs22 c-text-ellipsis2 c-lh36">{{item.name}}</div>
        <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))" class="c-flex-row  c-aligni-center">
          <div class="c-fs20 c-fc-gray c-lh c-flex-grow1 c-w0">{{item.people}}人参与</div>
        </div>
        <span class="theme-fc c-lh" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
          <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 78)}}
        </span>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{trainingName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{trainingDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreTraining">查看更多</span>
    </div>

    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb30">
      <div v-for="(item,index) in trainingList" :key="index" class="c-ww288 c-pt30" @click="clickGoTrainingDetail(item.id)">
        <div class="c-ww288 c-maxh192 c-br10 c-text-hidden c-p">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          <div class="timeShow" v-if="[1, 4, 5, 6].includes(item.status)">
            <div v-if="item.status == 1">
              距报名
              <cj-clocker :time="timeFn(index)" format="%D天%H小时" @on-finish="finishFn(index)"></cj-clocker>
            </div>
            <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
          </div>
        </div>
        <div class="c-fs24 c-pt12 c-text-ellipsis2">{{item.name}}</div>
        <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))" class="c-fs18 c-mt16 c-fc-gray">{{item.people}}人参与</div>
        <span class="theme-fc c-lh" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
          <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 78)}}
        </span>
      </div>
    </div>
  </div>
  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="trainingName" :titleDesc="trainingDesc" @clickMore="clickMoreTraining"></index-three-title-com>
    <div class="c-ph24 c-pb24 c-bd-b12-f5">
      <div @click="clickGoTrainingDetail(item.id)" class="c-flex-row" :key="index" v-for="(item,index) in trainingList">
        <div class="c-pv24">
          <div class="c-ww210 c-maxh210  c-text-hidden c-p c-br10">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
            <div class="timeShow" v-if="[1, 4, 5, 6].includes(item.status)">
              <div v-if="item.status == 1">距报名<cj-clocker :time="timeFn(index)" format="%D天%H小时" @on-finish="finishFn(index)"></cj-clocker></div>
              <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
            </div>
          </div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pv24" :class="index == trainingList.length - 1 ? '':'c-bd-b1'">
          <div class="c-fs24 c-text-ellipsis2 c-lh36" v-if="item.name">{{item.name}}</div>
          <div class="c-flex-row  c-aligni-center">
            <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))" class="c-fs18 c-fc-gray c-lh c-flex-grow1 c-w0">{{item.people}}人参与</div>
            <span class="theme-fc c-lh" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
              <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 78)}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt24 c-pb40 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{trainingName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{trainingDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreTraining">查看更多</span>
    </div>
    <div @click="clickGoTrainingDetail(item.id)" class="c-pt24 c-flex-row " :key="index" v-for="(item,index) in trainingList">
      <div class="c-ww160 c-maxh106 c-text-hidden c-br10 c-p">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <div class="timeShow" v-if="[1, 4, 5, 6].includes(item.status)">
          <div v-if="item.status == 1">
            距报名
            <cj-clocker :time="timeFn(index)" format="%D天%H小时" @on-finish="finishFn(index)"></cj-clocker>
          </div>
          <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column" :class="index == trainingList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-fw-b c-hh72">{{item.name}}</div>
        <div class="c-flex-row c-aligni-end">
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))" class="c-fs18 c-fc-gray c-flex-grow1 c-w0">{{item.people}}人参与</div>
          <span class="theme-fc c-lh" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
            <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 78)}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: "CampIndexCom",
  components: {
    indexThreeTitleCom
  },
  props: {
    trainingName: {
      type: String,
      default: '直播',
    },
    trainingDesc: {
      type: String,
      default: '直播',
    },
    trainingList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5",
      nowTime: '',
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    timeFn: function (index) {
      //status 1.待招生、2.招生中、3.待开课、4.开课中、5.已结束、6.招生中/开课中
      let stime = this.trainingList ? utilJs.getTimeByDate(this.trainingList[index].enrollStartAt) : 0;
      let time = '';
      if (this.trainingList[index].status == 1) {
        time = stime;
      }
      return time;
    },
    finishFn: function (index) {
      // if (this.trainingList[index].status == 1) {
      //   this.trainingList[index].status = 2;
      // } else {
      //   this.trainingList[index].status = 3;
      // }
    },
    clickMoreTraining() {
      let toPath = `/homePage/camp/campList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoTrainingDetail(id) {
      let toPath = `/homePage/camp/campDetail?campId=${id}&ckFrom=${global.ckFrom.camp}`;
      this.iosAppRouteChange(toPath);
    }
  },
};
</script>

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
</style>
